<template>
  <div>
    <el-card>
      <div>
        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
          <el-form-item label="权限名称">
            <el-input v-model="form.permissionName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="mb-1" icon="el-icon-search" size="middle" @click="getList">
              查询
            </el-button>
            <el-button type="primary" class="mb-15" icon="el-icon-refresh" size="middle" @click="getList">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-row>
        <el-col :span="12">
          <el-table :data="tableData" border style="width: 100%;" height="calc(100vh - 170px)" ref="singleTable" highlight-current-row @current-change="handleCurrentChange">
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column prop="permissionName" label="权限名称" width="200">
            </el-table-column>
            <el-table-column prop="menuCount" label="关联菜单数" width="100">
            </el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
          </el-table>
          <!-- <div style="margin-top: 25px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageNo" :page-sizes="[10, 20, 50]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
          </div> -->
        </el-col>
        <el-col :span="12">
          <el-tree :data="menuTree" show-checkbox node-key="id" :default-expand-all="true" :default-checked-keys="allocMenus" :props="defaultProps" @check="handleCheckChange">
          </el-tree>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
      
<script>
import { getPermissionPage, getPermissionAllocMenus, setPermissionRelMenu } from "@/api/permission";
import { getMenuTree } from "@/api/menu";
export default {
  components: {
    // PermissionInfoComp
  },
  data () {
    return {
      form: {
        permissionName: '',
      },
      params: {
        pageNo: 1,
        pageSize: 1000,
      },
      // total: 0,
      tableData: [],
      item: undefined,
      menuTree: [],
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      selectPerId: '',
      allocMenus: []
    }
  },
  mounted () {
    this.selectPerId = this.$route.query.perId
    this.getList()
    this.getMenuTree()
    this.getListAllocMenus()
  },
  methods: {
    getList () {
      const param = { ...this.params, ...this.form }
      getPermissionPage(param).then((res) => {
        if (res.status === 200) {
          const data = res.data.records
          const tmp = []
          let selectPer = null
          data.forEach(element => {
            if (element.id === this.selectPerId) {
              selectPer = element
            } else {
              tmp.push(element)
            }
          });
          if (selectPer !== null) {
            this.tableData = [selectPer, ...tmp]
            this.$refs.singleTable.setCurrentRow(selectPer);
          } else {
            this.tableData = [...tmp]
          }
          this.total = res.data.total

        } else {
          this.$message(res.message);
        }
      });
    },
    getMenuTree () {
      const param = {}
      getMenuTree(param).then((res) => {
        if (res.status === 200) {
          this.menuTree = res.data;
        } else {
          this.$message(res.message);
        }
      });
    },
    getListAllocMenus () {
      const param = { id: this.selectPerId }
      getPermissionAllocMenus(param).then((res) => {
        if (res.status === 200) {
          const data = res.data
          this.allocMenus = data.map(item =>
            item.menuId
          );
        } else {
          this.$message(res.message);
        }
      });
    },
    handleCurrentChange (row) {
      if (this.selectPerId !== row.id) {
        this.selectPerId = row.id
        this.getMenuTree()
        this.getListAllocMenus()
      }
    },
    handleCheckChange (item, data) {
      const menus = data.checkedKeys
      const param = { permissionId: this.selectPerId, menuIds: menus }
      setPermissionRelMenu(param).then((res) => {
        if (res.status === 200) {
          this.$message({
            message: res.message,
            type: 'success'
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
}
</script>